let wai = document.querySelector('.wai');
let nei = document.querySelector('.nei')
let da = document.querySelector('.da')
let datu = document.querySelector('.datu')

// console.log(wai, nei, da, datu);
wai.onmouseover = function () {
    nei.style.display = 'block'
    da.style.display = 'block'
}
wai.onmouseout = function () {
    nei.style.display = 'none'
    da.style.display = 'none'
}
wai.onmousemove = function (e) {
    let x = e.pageX - this.offsetLeft;
    let y = e.pageY - this.offsetTop;
    // console.log(x, y);
    let shubiaox = x - nei.offsetWidth / 2
    let shubiaoy = y - nei.offsetHeight / 2
    // console.log(shubiaox, shubiaoy);
    if (shubiaox <= 0) {
        shubiaox = 0
    } else if (shubiaox >= wai.offsetWidth - nei.offsetWidth) {
        shubiaox = wai.offsetWidth - nei.offsetWidth
    }
    if (shubiaoy <= 0) {
        shubiaoy = 0
    } else if (shubiaoy >= wai.offsetHeight - nei.offsetHeight) {
        shubiaoy = wai.offsetHeight - nei.offsetHeight
    }





    nei.style.left = shubiaox + 'px'
    nei.style.top = shubiaoy + 'px'


    datu.style.left = -((datu.offsetWidth - da.offsetWidth) / (wai.offsetWidth - nei.offsetWidth)) * shubiaox + 'px';
    datu.style.top = -((datu.offsetHeight - da.offsetHeight) / (wai.offsetHeight - nei.offsetHeight)) * shubiaoy + 'px';

}
